<!--
 * @Author: shaohang-shy
 * @Date: 2021-02-24 22:38:45
 * @lastEditors: shaohang-shy
 * @LastEditTime: 2021-02-24 22:46:30
 * @Description: demo06 State&声明周期
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class Clock extends React.Component {
        /**
         * constructor()中完成了React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。
         */
        constructor(props) {
          console.log("component constructor!");
          super(props);
          this.state = { date: new Date() };
        }
        /**
         * componentWillMount()一般用的比较少，它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后，但是还未渲染DOM时。
         */
        componentWillMount() {
          console.log("component componentWillMount!");
        }
        /**
         * 组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染
         */
        componentDidMount() {
          console.log("component componentDidMount!");
          this.timerID = setInterval(() => this.tick(), 1000);
        }
        /**
         * 在此处完成组件的卸载和数据的销毁。
         * 1.clear你在组建中所有的setTimeout,setInterval
         * 2.移除所有组建中的监听 removeEventListener
         */
        componentWillUnmount() {
          console.log("component componentWillUnmount !");
          clearInterval(this.timerID);
        }

        tick() {
          this.setState({
            date: new Date(),
          });
        }

        render() {
          return (
            <div>
              <h1>Clock Components</h1>
              <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            </div>
          );
        }
      }

      ReactDOM.render(<Clock />, document.getElementById("root"));
    </script>
  </body>
</html>
